<div id="system" (contextmenu)="goBack($event)" (keydown)="getKey($event)" tabindex="1" (focus)="getFocus()">
<!--<div id="system">-->
  <header id="content-header">
    <!-- 时间 -->
    <div class="header-times">
      <p>{{ dateTimes[0] }}</p>
      <p>{{ dateTimes[1] }}</p>
      <p>{{ dateTimes[2] }}</p>
      <p>{{ dateTimes[3] }}</p>
      <p>年</p>
      <p>{{ dateTimes[4] }}</p>
      <p>{{ dateTimes[5] }}</p>
      <p>月</p>
      <p>{{ dateTimes[6] }}</p>
      <p>{{ dateTimes[7] }}</p>
      <p>日</p>
      <p> - </p>
      <p>{{ dateMonths[0] }}</p>
      <p>{{ dateMonths[1] }}</p>
      <p>时</p>
      <p>{{ dateMonths[2] }}</p>
      <p>{{ dateMonths[3] }}</p>
      <p>分</p>
      <p>{{ dateMonths[4] }}</p>
      <p>{{ dateMonths[5] }}</p>
      <p>秒</p>
    </div>
    <!-- 图标、数据 -->
    <div class="header-icon">
      <div class="margin-l" (click)="getKey($event, 1)">
        <img [class.logo]="logoTitle" [src]="companyLogo"/>
      </div>
      <div class="header-nav margin-l" *ngFor="let head of headList">
        <div class="header-top" *ngFor="let i of head.titleData">
          <p>{{ i.lable }}</p>
          <b>
            {{ titleData[i['feild']] }}
            <span *ngIf=" !i.style ">‰</span>
            <span *ngIf=" i.style ">单</span>
          </b>
        </div>
      </div>
    </div>
  </header>
  <div id="content-box">
    <div id="flexCon">
      <div class="flex-row flex-cell-l">
        <div class="flex-cell flex-cell-c">
          <div class="chart-wrapper">
            <div class="vertical">
              <div class="box-pil" *ngFor="let page of currentTablesList">
                <!--车标 车牌 门店名称-->
                <div class="box-one" *ngFor="let left of page.jbArray">
                <span>
                  <img class="logo"
                       [src]="left.TPLJ ? 'http://yyftp.jekunauto.com/' + left.TPLJ : 'http://yyftp.jekunauto.com/default/Logo51*51.png' ">
                  {{ left.CPHM }}
                </span>
                  <span>{{ left.MDMC }}</span>
                  <span>总耗时： {{ toHourMinute(left.consumeTime) }} </span>

                  <div class="box-step">
                    <apes-steps [apesCurrent]=""
                                [apesStatus]=""
                                class="customer-service">
                      <apes-step *ngFor="let item of page.items"
                                 [apesStatus]="item.status"
                                 [apesTitle]="item.title"
                                 [apesDescription]="toHourMinute(item.Description)"
                                 [apesType]="item.type"
                                 [apesIcon]="item.icon"></apes-step>
                    </apes-steps>
                  </div>
                </div>
                <!--评论显示区-->
                <div class="box-th" *ngFor="let right of page.tsArray">
                  <div class="th-one" style="overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;">
                    {{ right.remark ? right.remark : "无客诉处理内容..." }}
                  </div>
                  <div class="th-two">
                    <span>客诉处理 : </span>
                    <span>{{ right.name }}</span>&nbsp;
                    <span>{{ right.time }}</span>
                  </div>
                  <div class="th-one" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                    {{ right.complainContent ? right.complainContent : "无客诉处理内容..." }}
                  </div>
                  <div class="th-two">
                    <span>处理人 : </span>
                    <span>{{ right.lrr }}</span>&nbsp;
                    <span>{{ right.lrrq_sj }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-cell flex-cell-cl margin-l">
          <div class="chart-wrapper">
            <div class="vertical">
              <div class="chart-table" *ngFor="let data of rightList">
                <control-table [parmas]="data" [companyId]="companyData"></control-table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex-row flex-cell-b margin-t">
        <div class="flex-cell flex-cell-bl">
          <div class="chart-wrapper">
            <div class="bot-one">
              <div class="bot-span">
                <span>返修鉴定</span>
                <span>新增：{{ bottomLeft['XZZT'] }} 单</span>
                <span>待鉴定：{{ bottomLeft['DJDZT'] }} 单</span>
                <span>待分摊：{{ bottomLeft['DFTZT'] }} 单</span>
                <span>待返工补偿：{{ bottomLeft['DFGBC'] }} 单</span>
              </div>
              <div class="bot-vertical">
                <div *ngFor="let data of bottomStep" class="vertical-box">
                  <!-- 头部  -->
                  <div class="bot-tit">
                <span>
                  <img class="logo"
                       [src]="data.TPLJ ? 'http://yyftp.jekunauto.com/' + data.TPLJ : 'http://yyftp.jekunauto.com/default/Logo51*51.png' ">
                  {{ data.CPHM }}
                </span>
                    <span>{{ data.MDMC }}</span>
                    <span>总耗时： {{ toHourMinute(data.ZHS) }} </span>
                  </div>
                  <!-- 中间 步骤条 -->
                  <div class="stpes-box">
                    <apes-steps [apesCurrent]=""
                                [apesStatus]=""
                                class="customer-control">
                      <apes-step *ngFor="let item of data.item"
                                 [apesStatus]="item.status"
                                 [apesTitle]="item.title"
                                 [apesDescription]="toHourMinute(item.Description)"
                                 [apesType]="item.type"
                                 [apesIcon]="item.icon"></apes-step>
                    </apes-steps>
                  </div>
                  <!-- 底部 -->
                  <div class="bot-bottom">
                    <span>返修服务单：{{ data.ZT }}</span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-cell flex-cell-br margin-l">
          <div class="chart-wrapper">
            <div class="bot-two">
              <!-- 回访 -->
              <div>
                <table class="two-table">
                  <thead>
                  <tr>
                    <td class="td"></td>
                    <td class="th" *ngFor="let body of visitData">{{ body.headerName }}</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td class="td">日</td>
                    <td *ngFor="let body of visitData">{{ bottomCenter['dailyQuantity'][body['field']] }}</td>
                  </tr>
                  <tr>
                    <td class="td">月</td>
                    <td *ngFor="let body of visitData">{{ bottomCenter['monthQuantity'][body['field']] }}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <!-- 满意 -->
              <div>
                <table class="two-table">
                  <thead>
                  <tr>
                    <td class="td">满意度</td>
                    <td class="th" *ngFor="let body of satisfied">{{ body.headerName }}</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td class="td">回访成功统计</td>
                    <td *ngFor="let body of satisfied">{{ bottomCenter['monthlySatisfaction'][body['field']] }}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--<div class="main-copy">-->
      <!--Copyright-->
      <!--<i class="anticon anticon-copyright"></i>-->
      <!--{{year}} 本系统由猿猿软件提供技术支持-->
    <!--</div>-->
  </div>
  <company-modal (paramsOut)="changeCompany($event)"></company-modal>
</div>


